<!-- 单一菜单, 主要应用在左侧菜单不使用多级菜单, 而是简单的以及菜单 -->

<template>
  <div class="my-simple-menu" v-bind="$attrs">
    <template v-for="item in state.menuItems">
      <div
        class="my-menu-item"
        :class="[state.activeKey === `${item.key}` ? 'my-menu-item-active' : '', state.selectedKey === `${item.key}` ? 'my-menu-item-selected' : '']"
        @click="handleClickMenuItem(item)"
        @mouseenter="mouseenterMenuItem(item)"
        @mouseleave="mouseleaveMenuItem(item)"
      >
        <div class="my-menu-icon" v-if="item.icon">
          <Icon :icon="item.icon" :size="iconSize" />
        </div>
        <div class="my-menu-title" v-if="item.title">
          <span>{{ item.title }}</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, PropType } from "vue"
  import { Icon } from "/@/components/Icon"
  import { isNumber } from "lodash"
  import { SingleMenuItem } from "./types"
  import { useAttrs } from "/@/hooks/core/useAttrs"
  const emit = defineEmits(["select", "update:selectedKey"])

  const props = defineProps({
    width: { type: String, required: false },
    selectedKey: { type: [String], required: false },
    iconSize: { type: [Number], required: false, default: 16 },
    items: { type: Object as PropType<SingleMenuItem[]>, default: [] },
  })
  const state = ref<any>({
    activeKey: "",
    selectedKey: null,
    menuItems: [] as SingleMenuItem[],
  })
  onMounted(() => {
    const { selectedKey, items } = props
    state.value.menuItems = items
    const selectedNode = items.length > 0 ? (selectedKey ? items.findLast((e) => e.key === selectedKey) : items[0]) : null
    handleClickMenuItem(selectedNode)
  })

  const mouseenterMenuItem = (node: any) => {
    if (state.value.selectedKey === node.key) {
      return
    }
    state.value.activeKey = node.key
  }

  const mouseleaveMenuItem = (node: any) => {
    state.value.activeKey = ""
  }

  const handleClickMenuItem = (node: any) => {
    state.value.selectedKey = node?.key
    // 抛出事件
    if (node?.key) {
      emit("select", node)
      emit("update:selectedKey", state.value.selectedKey)
    }
  }
</script>

<style lang="less">
  .my-simple-menu {
    border-right: 1px solid #ebeef5;
    padding: 8px 3px 8px 3px;
  }
  .my-simple-menu,
  .my-menu-item {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    text-align: center;
    align-items: center;
    color: @text-color-base;
    margin-bottom: 5px;
    // font-size: 14px;
    div {
      width: 100%;
      align-items: center;
    }
    .my-menu-title > span {
      line-height: 1.2;
    }
  }
  .my-menu-item {
    margin-top: 3px;
    cursor: pointer;
    padding: 2px;

    div {
      margin-bottom: 1px;
    }
  }

  .my-menu-item-active {
    &:hover {
      border-radius: 10%;
      background-color: @menu-active-bg;
      color: @menu-active-color;
      transform: scaleY(1);
      opacity: 1;
      // transform: translateX(-50%);
      transition: all 0.5s;
    }

    &:after {
      transform: scaleY(1);
      opacity: 1;
      transition: all 0.5s;
    }
  }

  .my-menu-item-selected {
    color: @menu-selected-color;
    background-color: @menu-selected-bg;
    border-radius: 10%;

    &:hover {
      transform: scaleY(1);
      opacity: 1;
      transition: all 0.5s;
    }

    &:after {
      transform: scaleY(1);
      opacity: 1;
      transition: all 0.5s;
    }
  }
</style>
